Hi, 大家好

介紹完 Babel 歷史後的第一篇，就將是會如何使用 babel 來跟 webpack 應用在一起了

當然，babel 本身也有提供 cli 版本的指令

包含像是 babel-node，他會自動轉譯 ES 新版的程式碼

並幫你執行

而 babel 最基本的功能跟 webpack 很像

會是為 JavaScript 做編譯

不過在今天 webpack 這個 all-in-one 的編譯器裡

我們當然就會讓 babel 和其他 loader 一起串接

在 webpack 中使用 babel-loader

今天上網搜尋 babel loader

可以看到真的有一個 babel-loader 存在

而且還在 babel/ 這個路徑底下，代表是 babel 官方維護的

我們來使用一些新語法吧！

我們這邊先來把上次寫的 SASS/SCSS 編譯清空

(我原本想要使用像是 **、以及一些我之前認為較新的語法的)

不過後來發現 Firfox 和 Chrome 支援性超好的

我手邊又沒有大魔王 IE 做測試

不過，正好有一個規範！

是各家瀏覽器廠商爭吵很久，後來還沒實現的規範

那就是 import

Can I Use import

然後我發現 Chrome 又偷偷把他實作出來了⋯⋯

沒關係！我們使用 Firefox 吧！(Firefox 的 import 功能還在實驗階段，要改設定才會啟用)

來寫一些 Firefox 看不懂的 code 吧！

基本的 setup 是這樣，一般的 code 可以在 Firefox 執行

我們這邊來新增一個 module, firefox.js

內容有 name 和 color

這邊我們使用一樣是 ES6 的語法 export default {} (會跟 import 做搭配)

基本上功能跟 module.exports = {} 是類似的

來把 name 和 color 釋出

最後使用 import，是 es6 版的 require()

(關於 ES6 module 與 CommonJS module 的詳細說明，有空會介紹)

編譯

實際編譯，應該要是失敗的⋯⋯

結果他竟然成功了！

哎呀，原來 webpack 之後更新成

會預設幫你編譯 ES6 module 了啊

今天

真令人傷心

看來今天是個大失敗

如果你手上有個 IE 可以測試的話 ⋯⋯ 應該可以看出 babel 的效用

想要嘗試的朋友，可以使用

來看各種奇耙的設定

我們明天見